<template>
<div class="user-main">

    <div class="container">
        <el-card class="card" shadow="never">
            <div slot="header">
                <el-button type="primary" size="small" @click="goAdd">新增角色</el-button>
            </div>
            <el-table :data="roleList" border stripe>
                <el-table-column label="#" type="index" width="50" fixed />
                <el-table-column label="角色名称" prop="roleName" width="200" fixed />
                <el-table-column label="角色编码" prop="roleCode" width="200" />

                <el-table-column label="备注" prop="remark" />
                <el-table-column label="添加时间" prop="createTime" width="200" />
                <el-table-column label="操作" prop="nickName" width="300">
                    <template slot-scope="scope">
                        <el-button type="success" size="mini" @click="goEdit(scope.row.id)">编辑</el-button>
                        <el-button type="error" size="mini" @click="goDel(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination style="margin-top: 30px;text-align:right;" :current-page.sync="page.start" :page-sizes="page.sizes" :page-size="page.limit" layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" @size-change="sizeChange" @current-change="currentChange" />

        </el-card>

    </div>
    <RoleForm ref="roleForm" :menu-list="menuList" @refresh="getRoleList" />

    <!-- 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 -->
    <!-- <el-tree ref="tree" v-loading="treeLoad" node-key="id" show-checkbox :data="menuList" :props="defaultProps" /> -->
</div>
</template>

<script>
import roleApi from '@/api/auth/role'
import permissionApi from '@/api/auth/permission'
import RoleForm from './components/RoleForm'
export default {
    name: 'AuthUser',
    components: {
        RoleForm
    },
    data() {
        return {
            search: {
                username: 'abc'
            },
            roleList: [],
            page: {
                start: 1,
                limit: 10,
                sizes: [10, 20, 30, 40],
                totalCount: 0
            },
            // 树形组件的使用
            menuList: [],

            // props: {
            //     // label	指定节点标签为节点对象的某个属性值
            //     label: 'name',
            //     // children	指定子树为节点对象的某个属性值
            //     children: 'zones'
            // },
           
        }
    },
    created() {
        this.getRoleList()
        this.getAllMenuList()
    },
    methods: {
        goAdd() {
            this.$refs.roleForm.openDialog()
        },
        goEdit(id) {
            this.$refs.roleForm.openDialog(id)
        },
        getRoleList() {
            roleApi.findRolesByPage(this.page.start, this.page.limit)
                .then(res => {
                    console.log(res)
                    if (res.success) {
                        this.roleList = res.data.rows
                        this.page.totalCount = res.data.total
                    } else {
                        this.$message.error(res.message)
                    }
                })
        },
        doReset() {
            // 重置表单  前提:prop属性必须存在
            this.$refs.searchForm.resetFields()
        },
        doSearch() {

        },
        sizeChange(v) {

        },
        currentChange(v) {

        },
        // 初始化所有菜单备用
        getAllMenuList() {
            permissionApi.findAllPermissions().then((res) => {
                if (res.success) {
                    this.menuList = res.data.menus
                } else {
                    this.$message.error('获取数据失败!')
                }
                this.loading = false
            })
        },
        goDel(id) {
            this.$confirm('确认删除角色?')
                .then(res => {
                    roleApi.removeRole(id)
                        .then(res => {
                            if (res.success) {
                                this.$message.success('删除成功!')
                                this.getRoleList()
                            } else {
                                this.$message.error('删除失败')
                            }
                        })
                })
        },

        // 树形组件的用法
        handleCheckChange(data, checked, indeterminate) {
            console.log(data, checked, indeterminate);
        },
        handleNodeClick(data) {
            console.log(data);
        },
      

    }
}
</script>

<style lang="scss" scoped>
.user-main {
    .card {
        margin: 30px;
    }

    .avatar-img {
        width: 120px;
        height: 80px;
    }
}
</style>
